<template>
    <div class="circle" >
      <div class="circle_ctx">
        <div class="circle-number">
            {{ numberFormat(number) }}
        </div>
        <div class="circle-text">
            {{ circleText }}
        </div>
      </div>
      <svg viewBox="0 0 100 100" class="ant-progress-circle">
        <defs>
        <linearGradient id="linear-grad">
            <stop offset="0" stop-color="#1FE79A" />
            <stop offset="1" stop-color="#A6FFDD" />
        </linearGradient>
        <radialGradient id="radial-grad">
            <stop offset="0" stop-color="#f7ff00" />
            <stop offset="1" stop-color="#db36a4" />
        </radialGradient>

        <path id="grad-path" d="M 50,50 H 200 V 150 L 50,100 V 200 H 200"/>
    </defs>
        <path
          d="M 50,50 m 0,-47
             a 47,47 0 1 1 0,94
             a 47,47 0 1 1 0,-94"
          stroke="#f3f3f3"
          stroke-linecap="round"
          stroke-width="6"
          fill-opacity="0"
          class="ant-progress-circle-trail"
          :style="{
            stroke: bgColor,
            strokeDasharray: '295.31px, 295.31px',
            strokeDashoffset: '0px',
            transition:
              'strokeDashoffset 0.3s ease 0s,stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s,stroke-width 0.06s ease 0.3s, opacity 0.3s ease 0s,'
          }"
        ></path>
        <path
          d="M 50,50 m 0,-47
             a 47,47 0 1 1 0,94
             a 47,47 0 1 1 0,-94"
          stroke-linecap="round"
          stroke-width="6"
          opacity="1"
          fill-opacity="0"
          class="ant-progress-circle-path"
          stroke="url(#linear-grad)"
          :style="{
            // stroke: processColor,
            strokeDasharray: strokeDasharray,
            strokeDashoffset: '0px',
            transition:
              'stroke-dashoffset 0.3s ease 0s,stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s,stroke-width 0.06s ease 0.3s, opacity 0.3s ease 0s'
          }"
        ></path>
      </svg>
    </div>
  </template>
  <script>
  const accDiv = (arg1, arg2) => {
    let t1 = 0,
      t2 = 0,
      r1,
      r2
    try {
      t1 = arg1.toString().split('.')[1].length
    } catch (e) {}
    try {
      t2 = arg2.toString().split('.')[1].length
    } catch (e) {}
    r1 = Number(arg1.toString().replace('.', ''))
    r2 = Number(arg2.toString().replace('.', ''))
    if (r2 == 0) {
      return Infinity
    } else {
      return ((r1 / r2) * Math.pow(10, t2 - t1)).toFixed(2)
    }
  }
  const accMul = (arg1, arg2) => {
    let m = 0,
      s1 = arg1.toString(),
      s2 = arg2.toString()
    try {
      m += s1.split('.')[1].length
    } catch (e) {}
    try {
      m += s2.split('.')[1].length
    } catch (e) {}
  
    return (
      (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) /
      Math.pow(10, m)
    )
  }
  
  export default {
    name: 'circleBox',
    data() {
      return {
        name: 'circle',
        strokeDash: [100.482, 295.31]
      }
    },
    computed: {
      strokeDasharray: function () {
        this.strokeDash = [accMul(accDiv(295.31, 100), this.grade), 295.31]
        let result = this.strokeDash
          .map((res) => {
            return res + 'px'
          })
          .join(',')
        return result
      }
    },
    props: {
      width: {
        // 圆宽度
        type: String,
        default: '100px'
      },
      circleText: {
        //中间自定义展示内容
        type: String,
        default: '默认'
      },
      bgColor: {
        // 背景滚动颜色
        type: String,
        default: 'rgba(255, 255, 255, 0.04)'
      },
      processColor: {
        // 进度颜色
        type: String,
        default: 'rgb(16, 142, 233)'
      },
    //   linear-gradient(0deg, #1FE79A 0%, #A6FFDD 100%);
      grade: {
        // 进度 分数控制 颜色
        type: Number,
        default: 50
      },
      number:{
        type:Number,
        default:21368
      }
    }
  }
  </script>
  <style lang="scss">
  .circle {
    position: relative;
    width: 100%;
    height: 100%;
    .circle_ctx {
      min-width: 100%;
      text-align: center;
      height: 40px;
      position: absolute;
      top:0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      margin: auto;
      .circle-number {
        font-family: DIN;
        font-size: 20px;
        font-weight: bold;
        line-height: 20px;
        letter-spacing: 0em;

        background: linear-gradient(180deg, #D5FFF5 15%, #8CD9C5 84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        z-index: 0;
      }
      .circle-text {
        
        font-family: Source Han Sans;
        font-size: 12px;
        font-weight: normal;
        line-height: 24px;
        text-align: center;
        letter-spacing: 0em;

        font-variation-settings: "opsz" auto;
        /* 文字色 */
        color: #D0FFF2;

        z-index: 1;
      }
    }
  }
  </style>
  